<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <title>任务列表</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="renderer" content="webkit">

        <link rel="shortcut icon" href="assets/img/favicon.ico"/>
        <!-- Loading Bootstrap -->
        <link href="assets/css/backend.min.css" rel="stylesheet">

        <style>
            .taskPlane {
                margin-bottom: 20px;
            }

            .taskUl {
                min-height: 100px;
                max-height: 600px;
                background-color: #EFEDE9;
                padding: 15px;
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                position: relative;
                -webkit-box-orient: vertical;
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;
                box-shadow: 0 0 5px #CCC;
                border-radius: 4px;
            }

            .taskUl .title {
                padding: 5px 0 15px 0;
            }

            .taskUl ul {
                list-style: none;
                margin: 0;
                padding: 0;
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                -ms-flex: 1;
                flex: 1;
                position: relative;
                overflow: hidden;
                -webkit-overflow-scrolling: touch;
            }

            .taskUl ul:hover {
                overflow: auto;
            }

            /*定义滚动条宽*/
            .taskUl ul::-webkit-scrollbar {
                width: 8px;
            }

            /*定义滚动条的轨道*/
            .taskUl ul::-webkit-scrollbar-track {
                background-color: #ffffff;
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .2);
            }

            /*定义滚动条的滑块*/
            .taskUl ul::-webkit-scrollbar-thumb {
                background-color: rgba(0, 0, 0, .5);
            }

            .taskUl ul li {
                padding: 15px;
                background-color: #ffffff;
                margin-bottom: 10px;
                cursor: pointer;
                display: block;
                border-radius: 4px;
                word-break: break-all;
                /*white-space: nowrap;*/
                /*overflow: hidden;*/
                /*text-overflow: ellipsis;*/
            }

            .taskUl ul li.hl {
                background-color: #18bc9c;
                color: #ffffff;
            }

            .warnColor{
                color: red;
            }
        </style>

    </head>

    <body class="inside-header inside-aside ">
        <div id="main" role="main">
            <div class="tab-content tab-addtabs">
                <div id="content">
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <section class="content-header hide">
                                <h1>
                                    控制台
                                    <small>Control panel</small>
                                </h1>
                            </section>
                            <!-- RIBBON -->
                            <div id="ribbon">
                                <ol class="breadcrumb pull-left">
                                    <li><a href="dashboard" class="addtabsit"><i class="fa fa-dashboard"></i> 控制台</a></li>
                                </ol>
                                <ol class="breadcrumb pull-right">
                                    <li><a href="javascript:;" data-url="task.html">任务管理</a></li>
                                </ol>
                            </div>
                            <div class="fixed-table-toolbar" style="padding: 15px 15px 0 15px;">
                                <div class="columns-right pull-right">
                                    <span id="taskAddInfo"></span>
                                    <button id="taskAddBtn" class="btn btn-success btn-disabled" type="button">加入任务</button>
                                </div>
                            </div>
                            <!-- END RIBBON -->
                            <div class="content">
                                <div class="row">
                                    <div class="col-md-2 taskPlane">
                                        <div class="taskUl ite">
                                            <div class="title">塌落度</div>
                                            <ul>
                                                <li>140 ± 20</li>
                                                <li>160 ± 20</li>
                                                <li>180 ± 20</li>
                                                <li class="hl">200 ± 20</li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="col-md-2 taskPlane">
                                        <div class="taskUl ite">
                                            <div class="title">产品型号</div>
                                            <ul>
                                                <li>C15</li>
                                                <li>C20</li>
                                                <li>C25</li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="col-md-2 taskPlane">
                                        <div class="taskUl ite">
                                            <div class="title">车辆</div>
                                            <ul>
                                                <li>苏A.GL1231 李师傅</li>
                                                <li>苏A.GL1233 王师傅</li>
                                                <li>苏A.GA1111 刘师傅</li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="col-md-2 taskPlane">
                                        <div class="taskUl ite">
                                            <div class="title">排产</div>
                                            <ul>
                                                <li>工地一</li>
                                                <li>工地二</li>
                                                <li>工地三</li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="col-md-2 taskPlane">
                                        <div class="taskUl ite">
                                            <div class="title">生产车间 操作员</div>
                                            <ul>
                                                <li>老三</li>
                                                <li>王二</li>
                                                <li>赵六</li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="col-md-2 taskPlane">
                                        <div class="taskUl">
                                            <div class="title">生产任务列表</div>
                                            <ul>
                                                <li>工地一</li>
                                                <li>工地二</li>
                                                <li>工地三</li>
                                            </ul>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="assets/js/require.min.js" data-main="assets/js/require-backend.min.js"></script>
        <script type="text/javascript" src="assets/js/jquery-3.1.1.min.js"></script>
        <script>
            $(document).ready(function () {

                checkAddSelect();//检查

                //选择项的点击
                $(".taskUl.ite ul li").click(function () {
                    var $this = $(this);
                    $this.toggleClass('hl');
                    $this.siblings().removeClass('hl');
                    checkAddSelect();
                });

                //点击加入按钮
                $('#taskAddBtn').click(function () {
                    if ($(this).hasClass('disabled'))return;
                    console.log("点击了加入按钮");
                });
            });

            //检查选择项，并显示所选信息，控制按钮是否可点击
            function checkAddSelect() {
                var arr = [], html = '';
                $(".taskUl.ite").each(function (index, item) {
                    var $item = $(item);
                    var $hl = $item.find('li.hl');
                    var title = $.trim($item.find('.title').html());
                    if ($hl && $hl.length) {
                        var txt = $.trim($hl.html());
                        arr.push({"title": title, "txt": txt});
                    }
                });
                $.each(arr, function (index, item) {
                    html += item.title + '：<span class="warnColor">' + item.txt + '</span>；&nbsp;&nbsp;';
                });
                $("#taskAddInfo").html(html);
                if (arr && arr.length > 4) {
                    $("#taskAddBtn").removeClass('disabled');
                } else {
                    $("#taskAddBtn").addClass('disabled');
                }
            }
        </script>
    </body>
</html>